//
//  MenueView.swift
//  DesignCode
//
//  Created by 刘文超 on 2020/5/7.
//  Copyright © 2020 刘文超. All rights reserved.
//

import SwiftUI

struct MenueView: View {
    var body: some View {
        
        VStack{
            Spacer()
            
            VStack(spacing:16){
                Text("美媒称中国限制医疗物资出口，商务部这些数据可让其闭嘴")
                    .font(.caption)
                    .padding(.horizontal,20)
                    .lineLimit(2)
                
                Color.white
                    .frame(width: 38, height: 6)
                    .clipShape(RoundedRectangle(cornerRadius: 3))
                    .frame(width: 130, height: 6,alignment: .leading)
                    .clipShape(RoundedRectangle(cornerRadius: 3))
                    .background(Color.black.opacity(0.08))
                    .padding()
                    .frame(width: 150, height: 24)
                    .background(Color.black.opacity(0.1))
                    .clipShape(RoundedRectangle(cornerRadius: 12))
                
                
                MenuItem(title: "Account", icon: "gear")
                MenuItem(title: "Billing", icon: "creditcard")
                MenuItem(title: "Sign out", icon: "person.crop.circle")
            }
                
            .frame(maxWidth: .infinity)
            .frame(height: 300)
            .background(LinearGradient(gradient: Gradient(colors: [Color.white,Color.blue]), startPoint: .top, endPoint: .bottom))
            .clipShape(RoundedRectangle(cornerRadius: 30, style: .continuous))
            .shadow(color: Color.blue.opacity(0.6), radius: 30, x: 0, y: 20)
            .padding(.horizontal,30)
        .overlay(
            Image("Avatar")
            .resizable()
            .scaledToFill()
            .frame(width: 60, height: 60, alignment: .center)
            .clipShape(Circle())
            .offset( y: -150)
        )
            
        }
        .padding(.bottom,30)
    }
}

struct MenueView_Previews: PreviewProvider {
    static var previews: some View {
        MenueView()
    }
}


//MARK:设置组件
struct MenuItem:View {
    
    var title:String = ""
    var icon:String = ""
    
    var body:some View {
        HStack( spacing: 16){
            Image(systemName: icon)
                .font(.system(size: 20, weight: .light))
                .imageScale(.large)
                .frame(width: 32, height: 32)
                .foregroundColor(Color.gray.opacity(0.9))
            
            Text(title)
                .font(.system(size: 20, weight: .bold, design: .default))
                .frame(width: 120, alignment: .leading)
       }
    }
}
